<template>
  <div class="overviewtopics">
    <main-title title="议题总览"></main-title>
    <div class="topic">
      <div class="top">
        <div class="topbox" v-for="(item, index) in totalList" :key="index">
          <blue-title :title="item.label" :number="item.value" unit="项"></blue-title>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <div class="barEchart" ref="barEchart"></div>
          <div class="barLegend">
            <div class="barbox" v-for="(item, index) in legend" :key="index">
              <div class="number">{{ index + 1 }}</div>
              <div class="label">{{ item.label }}</div>
              <div class="value">
                <span class="num">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="rightbox">
            <div class="titile">{{ detail.title }}</div>
            <div class="box">
              <div class="boxitem">
                <div class="label">开始时间：</div>
                <span class="value">{{ detail.startTime }}</span>
              </div>
              <div class="boxitem">
                <div class="label">结束时间：</div>
                <span class="value">{{ detail.endTime }}</span>
              </div>
              <div class="boxitem">
                <div class="label">持续时间：</div>
                <span class="value">{{ detail.duration }}</span>
              </div>
              <div class="boxitem">
                <div class="label">议题内容：</div>
                <span class="value">{{ detail.content }}</span>
              </div>
              <div class="boxitem">
                <div class="label">参与人次：</div>
                <span class="value">{{ detail.personNum }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, inject, onMounted } from 'vue'
const echarts = inject('echarts')
let myEchart = null
let barEchart = ref(null)
let totalList = ref([
  { label: '所有议题', value: 38 },
  { label: '当前议题', value: 12 },
  { label: '结束议题', value: 26 }
])
let datay = ['热点议题1', '热点议题2', '热点议题3', '热点议题4', '热点议题5']
let datax = [95, 89, 78, 68, 68]
let colorList = [
  ['#3CB6FF', '#69F5FE'],
  ['#3CB6FF', '#69F5FE'],
  ['#FFCF92', '#FFB619'],
  ['#FFCF92', '#FFB619'],
  ['#FFCF92', '#FFB619']
]
let legend = ref([
  { label: '热点议题1', value: '95' },
  { label: '热点议题2', value: '89' },
  { label: '热点议题3', value: '78' },
  { label: '热点议题4', value: '68' },
  { label: '热点议题5', value: '68' }
])
let detail = ref({
  title: 'xxxxxxxx议题',
  startTime: '2023.2.23 09:00',
  endTime: '2023.2.23 09:00',
  duration: '2h',
  content: 'xxxxxxxxxxxxx',
  personNum: '36人'
})
onMounted(() => {
  setBarEchart()
})
const setBarEchart = () => {
  if (myEchart != null && myEchart != '' && myEchart != undefined) {
    myEchart.dispose() //销毁
  }
  myEchart = echarts.init(barEchart.value, null, { renderer: 'svg' })
  let option = {
    tooltip: {
      trigger: 'axis',
      textStyle: {
        fontSize: 22 // 字体大小
      },
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    grid: {
      left: '9%',
      right: '0%',
      bottom: '10%',
      top: '7%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        //修改背景线条样式
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: datay,
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
        // color: '#fff',
        // fontSize: 20
      },
      splitLine: {
        //修改背景线条样式
        show: false
      }
    },
    series: [
      {
        type: 'bar',
        // label: {
        //   show: true,
        //   color: '#fff',
        //   fontSize: 18
        // },
        barWidth: 17,
        emphasis: {
          focus: 'series'
        },
        showBackground: true, //开启背景
        backgroundStyle: {
          //设置背景样式
          color: 'rgba(42, 53, 68, 1)',
          barBorderRadius: 10
        },

        data: datax.reverse(),
        itemStyle: {
          color: (param) => {
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: colorList[param.dataIndex][0] },
              { offset: 1, color: colorList[param.dataIndex][1] }
            ])
          }
        }
      }
    ]
  }
  myEchart.setOption(option)
}
</script>
<style scoped lang="scss">
.overviewtopics {
  .topic {
    height: 400px;
    // background-color: red;
    box-sizing: border-box;
    overflow: hidden;
    .top {
      display: flex;
      justify-content: space-around;
      margin-top: 15px;
      //   .topbox {
      //   }
    }
    .bottom {
      display: flex;
      .left {
        width: 540px;
        height: 400px;
        position: relative;
        .barEchart {
          width: 540px;
          height: 400px;
        }
        .barLegend {
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          .barbox {
            display: flex;
            margin-bottom: 44px;
            .number {
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 18px;
              font-family: pmzd;
              font-weight: bold;
              color: #ffffff;
              width: 35.5px;
              height: 32px;
              background: url('@/assets/images/firstpage/yellownum.png') no-repeat;
              background-size: 100% 100%;
              transform: translateY(32px);
            }
            .label {
              font-size: 18px;
              font-family: shsc;
              font-weight: 500;
              color: #f7ffff;
              transform: translateX(10px);
            }
            .value {
              font-size: 26px;
              font-family: Arial;
              font-weight: bold;
              color: #ffd427;
              background: linear-gradient(180deg, #fabc38 0%, #ffffff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              margin-left: 380px;
            }
            &:nth-child(1) {
              transform: translateY(12px);
            }
            &:nth-child(2) {
            }
            &:nth-child(3) {
              transform: translateY(-5px);
            }
            &:nth-child(4) {
              transform: translateY(-15px);
              .number {
                background: url('@/assets/images/firstpage/bluenum.png') no-repeat;
                background-size: 100% 100%;
              }
            }
            &:nth-child(5) {
              transform: translateY(-25px);
              .number {
                background: url('@/assets/images/firstpage/bluenum.png') no-repeat;
                background-size: 100% 100%;
              }
            }
          }
        }
      }
      .right {
        width: 540px;
        height: 400px;
        // background-color: blue;
        .rightbox {
          width: 483.5px;
          height: 295px;
          background: url('@/assets/images/firstpage/topicBg.png') no-repeat;
          background-size: 100% 100%;
          margin: 20px 0 0 40px;
          overflow: hidden;
          .titile {
            font-size: 20px;
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            color: #ffffff;
            text-align: center;
            margin: 18px 0 20px 0;
          }
          .box {
            margin: 5px 0 0 38px;
            .boxitem {
              display: flex;
              margin-bottom: 15px;
              .label {
                text-align: center;
                width: 138px;
                height: 33px;
                background: url('@/assets/images/firstpage/topicbutton.png') no-repeat;
                background-size: 100% 100%;
                font-size: 19px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-style: italic;
                color: #ffffff;
              }
              .value {
                font-size: 26px;
                font-family: Arial;
                font-weight: bold;
                color: #ffd427;
                background: linear-gradient(180deg, #fabc38 0%, #ffffff 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
              }
            }
          }
        }
      }
    }
  }
}
</style>
